<template>
    <div class="view">
        <div class="friend-header">
            <ul class="sticky-header">
                <li class="sticky-top" :class="{'isSticky':cubeSticky.scrollY>=60}">
                    <span class="iconfont icon-fanhui" @click="back"></span>
                    <span class="nickname" id="nickname" :class="{'hidden':cubeSticky.scrollY<60}">{{friendInfo.nickName}}</span>
                    <!--                    <span class="iconfont icon-sandian rt"></span>-->
                    <span class="iconfont icon-share rt" @click="share"></span>
                </li>
            </ul>
        </div>
        <cube-sticky :pos="cubeSticky.scrollY" :check-top="cubeSticky.checkTop" ref="sticky">
            <cube-scroll :options="cubeSticky.scrollOptions"
                         :scroll-events="cubeSticky.scrollEvents"
                         @scroll="scrollHandler"
                         ref="mainScroll"
                         :data="friendDynamic"
                         @pulling-down="onPullingDown"
                         @pulling-up="onPullingUp">
                <div class="info-box">
                    <div class="wavy-box">
                        <wavy-svg class="wavy-svg"></wavy-svg>
                    </div>
                    <head-img class="head-img" :styleObject="{width:'21vw',height:'21vw'}" showObject="friend" :friend="friend"></head-img>
                    <div class="friend-name">{{friendInfo.nickName}}</div>
                    <div class="friend-factor">
                        <span class="age">{{friendInfo.age==='未知'?'未知年龄':(friendInfo.age||'年龄')+'岁'}}</span>
                        <span class="height">{{friendData.SNAP_HEIGHT==='未填写'?'未知身高':(friendData.SNAP_HEIGHT||'身高')}}</span>
                        <span class="nativePlace" v-if="friendInfo.snap_city_id!=='未填写'">{{friendInfo.snap_city_id}}</span>
                        <!--                        <span class="matchDegree">??</span>-->
                    </div>
                    <div class="handle flex">
                        <!--                        <div class="credit">-->
                        <!--                            <span class="iconfont icon-xinyongqiahuankuan"></span>-->
                        <!--                            <p>信用度</p>-->
                        <!--                        </div>-->
                        <div class="date" @click="toChat">
                            <span class="iconfont icon-kefu"></span>
                            <p>相亲</p>
                        </div>
                        <div class="complaint">
                            <a :href="'tel:'+tel">
                                <span class="iconfont icon-tousu_o"></span>
                                <p>投诉</p>
                            </a>
                        </div>
                        <div class="matchmaker" @click="needMatch">
                            <span class="">牵</span>
                            <p>牵线</p>
                        </div>
                    </div>
                    <div class="img-show">
                        <div class="img-show-none flex hidden">
                            <div class="left flex">
                                <div class="iconfont icon-xiangji2"></div>
                                <div>邀Ta上传</div>
                            </div>
                            <div class="right">
                                Ta未上传照片，快邀请Ta传图吧
                            </div>
                        </div>
                        <cube-scroll ref="scroll" :data="friendInfo.photo" direction="horizontal" class="horizontal-scroll-list-wrap">
                            <ul class="list-wrapper">
                                <li v-for="(item, index) in friendInfo.photo" class="list-item" :style="{'background-image':`url(${item.uploadfile.file_path})`}">
                                    <img :src="item.uploadfile.file_path+'?imageView2/0/h/95/q/50'" @click="handleImgsClick(index)">
                                </li>
                            </ul>
                        </cube-scroll>
                    </div>
                </div>
                <div class="detail-info">
                    <cube-sticky-ele ele-key="navTab" class="self-info-head">
                        <ul class="sticky-header">
                            <li class="sticky-middle">
                                <cube-tab-bar v-model="detailInfo.selectedLabel" :use-transition="true" ref="tabNav" :data="detailInfo.tabLabels" @change="changePage"></cube-tab-bar>
                            </li>
                        </ul>
                    </cube-sticky-ele>
                    <div class="tab-slide-container">
                        <div class="tab-content-wrap" v-show="detailInfo.selectedLabel ==='资料'">
                            <div class="self-intro">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>个人简介</div>
                                </div>
                                <div class="content">{{friendInfo.identity_introduction ? friendInfo.identity_introduction:'TA很懒，没有想写的'}}</div>
                            </div>
                            <div class="self-intro authentication">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>认证</div>
                                </div>
                                <div class="content flex">
                                    <div class="real">
                                        <div class="icon-box" :class="{'is-real':friendInfo.authentication>0}"><span class="iconfont icon-renzheng"></span></div>
                                        <div>实名认证</div>
                                    </div>
                                </div>
                            </div>
                            <div class="self-intro base-info">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>基本资料(12/12)</div>
                                </div>
                                <div class="content">
                                    <div class="id flex"><span>ID</span><span class="ellipsis">{{friendInfo.user_no}}</span></div>
                                    <div class="nickname flex"><span>昵称</span><span class="ellipsis">{{friendInfo.nickName}}</span></div>
                                    <div class="sex flex"><span>性别</span><span class="ellipsis">{{friendInfo.gender===2?'女':'男'}}</span></div>
                                    <div class="age flex"><span>年龄</span><span class="ellipsis">{{friendInfo.age===0?'未知':friendInfo.age+'岁'}}</span></div>
                                    <div class="height flex"><span>身高</span><span class="ellipsis">{{friendData.SNAP_HEIGHT}}</span></div>
                                    <div class="education flex"><span>学历</span><span class="ellipsis">{{friendData.SNAP_EDUCATION}}</span></div>
                                    <div class="income flex"><span>月收入</span><span class="ellipsis">{{friendData.SNAP_INCOME}}</span></div>
                                    <div class="home flex"><span>居住地</span><span class="ellipsis">{{friendData.SNAP_HOMETOWN_CITY_ID}}</span></div>
                                    <div class="arital-status flex"><span>婚姻状况</span><span class="ellipsis">{{friendData.SNAP_MARITAL_STATUS}}</span></div>
                                    <div class="children flex"><span>子女情况</span><span class="ellipsis">{{friendData.SNAP_CHILD}}</span></div>
                                    <div class="house flex"><span>购房情况</span><span class="ellipsis">{{friendData.SNAP_HOUSE_PURCHASE}}</span></div>
                                    <div class="car flex"><span>购车情况</span><span class="ellipsis">{{friendData.SNAP_CAR_PURCHASE}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro hobby">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>兴趣爱好</div>
                                </div>
                                <div class="content flex" v-if="hobbyList!==''">
                                    <span v-for="hobby in hobbyList">{{hobby}}</span>
                                </div>
                                <div class="content flex" v-if="hobbyList==''">
                                    TA还未添加兴趣爱好!
                                </div>
                            </div>
                            <div class="self-intro base-info archives">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>小档案(13/13)</div>
                                </div>
                                <div class="content">
                                    <div class="home flex"><span>家乡</span><span class="ellipsis">{{friendData.SNAP_HOMETOWN_CITY_ID}}</span></div>
                                    <div class="residence flex"><span>户口</span><span class="ellipsis">{{friendData.SNAP_REGISTERED_RESIDENCE_CITY_ID}}</span></div>
                                    <div class="race flex"><span>民族</span><span class="ellipsis">{{friendData.SNAP_NATION}}</span></div>
                                    <div class="zodiac flex"><span>属相</span><span class="ellipsis">{{friendData.SNAP_ZODIAC}}</span></div>
                                    <div class="constellation flex"><span>星座</span><span class="ellipsis">{{friendData.SNAP_CONSTELLATION}}</span></div>
                                    <div class="blood-type flex"><span>血型</span><span class="ellipsis">{{friendData.SNAP_BLOODTYPE}}</span></div>
                                    <div class="shape flex"><span>体型</span><span class="ellipsis">{{friendData.SNAP_SHARE}}</span></div>
                                    <div class="weight flex"><span>体重</span><span class="ellipsis">{{friendData.SNAP_WEIGHT}}</span></div>
                                    <div class="facial-evaluate flex"><span>相貌自评</span><span class="ellipsis">{{friendData.SNAP_EVALUATION}}</span></div>
                                    <div class="religious-belief flex"><span>宗教信仰</span><span class="ellipsis">{{friendData.SNAP_BELIEF}}</span></div>
                                    <div class="smoke flex"><span>是否吸烟</span><span class="ellipsis">{{friendData.SNAP_SMOKE}}</span></div>
                                    <div class="drink flex"><span>是否喝酒</span><span class="ellipsis">{{friendData.SNAP_DRINK}}</span></div>
                                    <div class="daily-life flex"><span>生活作息</span><span class="ellipsis">{{friendData.SNAP_DAILYLIFE}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info enducation-work">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>教育及工作(7/7)</div>
                                </div>
                                <div class="content">
                                    <div class="school flex"><span>毕业院校</span><span class="ellipsis">{{friendData.SNAP_UNIVERSITY}}</span></div>
                                    <div class="major flex"><span>所学专业</span><span class="ellipsis">{{friendData.SNAP_MAJOR}}</span></div>
                                    <div class="job flex"><span>职业职务</span><span class="ellipsis">{{friendData.SNAP_DUTIES}}</span></div>
                                    <div class="company flex"><span>公司性质</span><span class="ellipsis">{{friendData.SNAP_COMPANY_NATURE}}</span></div>
                                    <div class="industry flex"><span>公司行业</span><span class="ellipsis">{{friendData.SNAP_COMPANY_INDUSTRY}}</span></div>
                                    <div class="work-condition flex"><span>工作状态</span><span class="ellipsis">{{friendData.SNAP_WORKING_CONDITION}}</span></div>
                                    <div class="language flex"><span>掌握语言</span><span class="ellipsis" v-html="languageHtml"></span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info family">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>家庭状况(6/6)</div>
                                </div>
                                <div class="content">
                                    <div class="rank flex"><span>家中排行</span><span class="ellipsis">{{friendData.SNAP_FAMILY_RANKING}}</span></div>
                                    <div class="parent flex"><span>父母情况</span><span class="ellipsis">{{friendData.SNAP_PARENT_SITUATION}}</span></div>
                                    <div class="father-work flex"><span>父亲工作</span><span class="ellipsis">{{friendData.SNAP_FATHER_WORK}}</span></div>
                                    <div class="mother-work flex"><span>母亲工作</span><span class="ellipsis">{{friendData.SNAP_MOTHER_WORK}}</span></div>
                                    <div class="parent-income flex"><span>父母经济</span><span class="ellipsis">{{friendData.SNAP_PARENT_ECONOMY}}</span></div>
                                    <div class="parent-medical-insurance flex"><span>父母医保</span><span class="ellipsis">{{friendData.SNAP_PARENTAL_INSURANCE}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info love-plan">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>爱情规划(8/8)</div>
                                </div>
                                <div class="content">
                                    <div class="marry-time flex"><span>想何时结婚</span><span class="ellipsis">{{friendData.SNAP_MARRIAGE_TIME}}</span></div>
                                    <div class="date-type flex"><span>偏爱约会方式</span><span class="ellipsis">{{friendData.SNAP_DATING_STYLE}}</span></div>
                                    <div class="value-character flex"><span>希望对方看重</span><span class="ellipsis">{{friendData.SNAP_OTHER_SIDE_VALUES}}</span></div>
                                    <div class="wedding flex"><span>期待婚礼形式</span><span class="ellipsis">{{friendData.SNAP_WEDDING_FORM}}</span></div>
                                    <div class="live-with-parent flex"><span>愿与对方父母住否</span><span class="ellipsis">{{friendData.SNAP_LIVING_WITH_PARENTS}}</span></div>
                                    <div class="children flex"><span>是否想要孩子</span><span class="ellipsis">{{friendData.SNAP_WANT_CHILDREN}}</span></div>
                                    <div class="cooking flex"><span>厨艺状况</span><span class="ellipsis">{{friendData.SNAP_COOKING_CONDITION}}</span></div>
                                    <div class="housework flex"><span>家务分工</span><span class="ellipsis">{{friendData.SNAP_DIVISION_OF_LABOUR}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info gift">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div class="title-text">礼物<span class="rt" @click="showGift">赠送礼物</span></div>
                                </div>
                                <div class="content-none" style="line-height:2em;" v-if="friendGift.length==0">
                                    Ta未收到任何礼物，<br>
                                    成为第一个给Ta制造惊喜的人吧！
                                </div>
                                <div class="content" v-else>
                                    <cube-scroll ref="friendGiftScroll" :data="friendGift" direction="horizontal" class="horizontal-scroll-list-wrap">
                                        <ul class="list-wrapper flex">
                                            <li v-for="(gift, index) in friendGift" class="list-item gift-item" :key="gift.id">
                                                <img class="gift-picture" :src="gift.image.file_path">
                                                <div class="gift-name ellipsis">{{gift.snop_name}}</div>
                                                <div class="gift-price iconfont icon-yuanbao">{{gift.total_price}}</div>
                                            </li>
                                        </ul>
                                    </cube-scroll>
                                </div>
                            </div>
                            <div class="self-intro base-info like-match">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>猜你喜欢</div>
                                </div>
                                <div class="content flex">
                                    <div class="candidates" v-for="item in likeMatch" @click="toPage('friendInfo',{friendId:item.user_id})">
                                        <div class="img-box"><img :src="item.avatar && item.avatar.file_status.status ? item.avatar.file_path+'?imageView2/0/h/80' : filePath"></div>
                                        <div class="nickname ellipsis">{{item.nickName}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-content-wrap match-module" v-show="detailInfo.selectedLabel ==='匹配'">
                            <!--                            <div class="no-match" :class="{'hidden':matchResult.length!==0}">-->
                            <!--                                <div class="headImg-link">-->
                            <!--                                    <head-img class="friend-img" :styleObject="{width:'21vw',height:'21vw'}"-->
                            <!--                                              showObject="friend" :friend="friend" :self="self"></head-img>-->
                            <!--                                    <div class="line">-->
                            <!--                                        <svg class="svg-icon" aria-hidden="true">-->
                            <!--                                            <use xlink:href="#icon-xinjian"></use>-->
                            <!--                                        </svg>-->
                            <!--                                    </div>-->
                            <!--                                    <head-img class="self-img" :styleObject="{width:'21vw',height:'21vw'}"-->
                            <!--                                              showObject="self" :self="self" :friend="friend"></head-img>-->
                            <!--                                </div>-->
                            <!--                                <div class="tip">-->
                            <!--                                    <p>想了解你们之间是否合拍吗?</p>-->
                            <!--                                    <p>想知道你与其Ta追求者的实力吗?</p>-->
                            <!--                                </div>-->
                            <!--                                <div class="compute">开始计算竞争力</div>-->
                            <!--                            </div>-->
                            <div class="compute-result">
                                <div class="time">报告生成时间 {{new Date()|NowTimeStamp}}
                                </div>
                                <div class="result">
                                    <div class="result-data">
                                        <div class="match-degree-box">
                                            <div class="match-degree">{{matchResult.score}}%</div>
                                        </div>
                                        <div class="fix flex">
                                            <div class="left">系统大数据运算</div>
                                            <div class="right">属于{{matchResult.score<=30?'低':matchResult.score<=70?'中':'高'}}匹配度</div>
                                        </div>
                                    </div>
                                    <div class="friend-result">
                                        <div class="outline">
                                            <div class="innerline">
                                                <head-img class="friend-img"
                                                          :styleObject="{width:'18vw',height:'18vw'}"
                                                          showObject="friend" :friend="friend"
                                                          :self="self"></head-img>
                                                <div class="title-tip">TA的择偶标准</div>
                                            </div>
                                        </div>
                                        <div class="outline-dynamic"></div>
                                        <div class="standard">
                                                <span :class="{'age':index == 0,'income':index == 1,'height':index == 2,'house':index == 3,'education':index == 4}"
                                                      v-for="(item,index) in matchResult.passive">
                                                    {{item=='HOUSE_PURCHASE'&&friendInfo.mate_selection[`SNAP_${item}`]=='不限'?'购房':''}}{{item=='EDUCATION'&&friendInfo.mate_selection[`SNAP_${item}`]=='不限'?'学历':''}}{{item=='HEIGHT'&&friendInfo.mate_selection[`SNAP_${item}`]=='不限'?'身高':''}}{{item=='INCOME'&&friendInfo.mate_selection[`SNAP_${item}`]=='不限'?'收入':''}}{{item=='MARITAL_STATUS'&&friendInfo.mate_selection[`SNAP_${item}`]=='不限'?'婚姻':''}}{{friendInfo.mate_selection[`SNAP_${item}`]}}{{item=='AGE'?'岁':''}}{{item=='CHILD'&&friendInfo.mate_selection[`SNAP_${item}`]=='没有'?'孩子':''}}</span>
                                            <!--                                            <span class="age">20-30岁</span>-->
                                            <!--                                            <span class="income">收入不限</span>-->
                                            <!--                                            <span class="height">161-186cm</span>-->
                                            <!--                                            <span class="house">购房不限</span>-->
                                            <!--                                            <span class="education">初中</span>-->
                                        </div>
                                    </div>
                                    <div class="self-result">
                                        <div class="outline">
                                            <div class="innerline">
                                                <head-img class="self-img"
                                                          :styleObject="{width:'18vw',height:'18vw'}"
                                                          showObject="self" :friend="friend"
                                                          :self="self"></head-img>
                                                <div class="title-tip">我的择偶标准</div>
                                            </div>
                                        </div>
                                        <div class="outline-dynamic"></div>
                                        <div class="standard">
                                            <span :class="{'age':index == 0,'income':index == 1,'height':index == 2,'house':index == 3,'education':index == 4}"
                                                  v-for="(item,index) in matchResult.active">
                                                {{item=='HousePurchase'&&user.mateSelection[`snap${item}`]=='不限'?'购房':''}}{{item=='Education'&&user.mateSelection[`snap${item}`]=='不限'?'学历':''}}{{item=='Height'&&user.mateSelection[`snap${item}`]=='不限'?'身高':''}}{{item=='Income'&&user.mateSelection[`snap${item}`]=='不限'?'收入':''}}{{item=='MaritalStatus'&&user.mateSelection[`snap${item}`]=='不限'?'婚姻':''}}{{user.mateSelection[`snap${item}`]}}{{item=='Age'?'岁':''}}{{item=='Child'&&user.mateSelection[`snap${item}`]=='没有'?'孩子':''}}</span>
                                            <!--                                            <span class="age">20-30岁</span>-->
                                            <!--                                            <span class="income">收入不限</span>-->
                                            <!--                                            <span class="height">161-186cm</span>-->
                                            <!--                                            <span class="house">购房不限</span>-->
                                            <!--                                            <span class="education">初中</span>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-content-wrap friend-dynamic-box" v-show="detailInfo.selectedLabel ==='动态'">
                            <div class="none-dynamic" v-if="friendDynamicTotal==0">
                                <p class="iconfont icon-zanwudongtai"></p>
                                暂无动态...
                            </div>
                            <ul class="friend-dynamic" v-if="friendDynamicTotal!==0">
                                <li class="item" v-for="(item,index) in friendDynamic">
                                    <div class="title">{{item.type==1?'上传头像':item.type==2?'自我介绍':item.type==3?'上传视频':item.type==4?'上传照片':''}}</div>
                                    <div class="upload-content">
                                        <img class="upload-headImg" v-if="item.type==1 || item.type==4" :src="item.content.file_path">
                                        <div class="upload-selfIntro ellipsis" v-if="item.type==2">
                                            {{item.content}}
                                        </div>
                                    </div>
                                    <div class="other">
                                        {{new Date(item.create_time*1000).getMonth()+1<10?'0'+(new Date(item.create_time*1000).getMonth()+1):new Date(item.create_time*1000).getMonth()+1}}/{{new
                                        Date(item.create_time*1000).getDate()<10?'0'+new
                                        Date(item.create_time*1000).getDate():new Date(item.create_time*1000).getDate()}} <span class="rt"><i class="iconfont icon-buzan"
                                                                                                                                              @click="praise(item.id,index)"></i> {{item.zans_count}}赞</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </cube-sticky>
        <div class="gift-mask" :class="{'hidden':!showGiftTool}" @click="showGift"></div>
        <div class="picker-gift" :class="{'picker-gift-show':showGiftTool}">
            <div class="picker-gift-head">
                选择礼物赠送
            </div>
            <div class="picker-gift-wrap">
                <div class="picker-gift-box">
                    <cube-scroll ref="giftScroll" :data="giftList" direction="horizontal" class="horizontal-scroll-list-wrap">
                        <ul class="list-wrapper flex">
                            <li class="item-outer flex" v-for="(item) in giftList">
                                <div class="gift-item" v-for="(gift) in item" :key="gift.id" @click="selectGift(gift.id)" :class="{'gift-item-selected':gift.id === giftSelectId}">
                                    <img class="gift-picture" :src="gift.image.file_path+'?imageView2/0/h/65'">
                                    <div class="gift-name ellipsis">{{gift.name}}</div>
                                    <div class="gift-price iconfont icon-yuanbao">{{gift.price}}</div>
                                </div>
                            </li>
                        </ul>
                    </cube-scroll>
                </div>
            </div>
            <div class="picker-gift-action">
                <div class="picker-gift-balance">
                    <span class="number iconfont icon-yuanbao">{{user.money}}</span>
                    <span class="recharge" @click="toPage('mineMoneyRecharge')">充值</span>
                    <span class="cubeic-arrow"></span>
                </div>
                <div class="picker-gift-btn" @click="giveGift" :class="{'picker-gift-btn-active':giftSelectId>=0}">立即赠送</div>
            </div>
        </div>


        <div class="fix-box flex">
            <div class="matchmaker" @click="needMatch">
                <span class="iconfont icon-tubiao_UMEqianxian"></span>
                <span>牵线</span>
            </div>
            <div class="chat" @click="toChat">
                <span class="iconfont icon-iconfontquanbuxiaoxizhengchang"></span>
                <span>聊天</span>
            </div>
            <div class="like" @click="like">
                <span class="iconfont" :class="isLike?'icon-icon-aixin- animated bounceIn':'icon-icon-aixin-1'" style="display: inline-block;"></span>
                <span>喜欢</span>
            </div>
            <div class="gift" @click="showGift">
                <span class="iconfont icon-liwu"></span>
                <span>礼物</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Inject} from "vue-property-decorator";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import Scene from "@/render/Scene";
    import HeadImg from "@/components/HeadImg.vue";
    import WavySvg from "@/components/WavySvg.vue";
    import Http from "@/service/Http";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import {shareControllerToggle, updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";
    import DialogConfig from "@/constant/DialogConfig";

    @Component({
        components: {
            HeadImg,
            WavySvg
        }
    })
    export default class FriendInfo extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private filePath: string = require("@/assets/images/user-no-face.jpg");
        private page: number = 1;
        private likeMatch: Array<object> = [];//猜你喜欢
        private isLike: number = 0;
        private friendDynamic: any[] = [];//好友动态
        private friendDynamicTotal: number = 0;//好友动态条数
        private friendInfo: any = {};
        private friendData: any = {};
        private matchResult: any = {};
        private friendGift: any[] = [];
        private giftList: any[] = [];
        private giftSelectId: number = -1;
        private showGiftTool: boolean = false;
        private hobbyList: any[] = [];
        private tel: string = "";
        private cubeSticky: any = {//吸附组件配置信息
            scrollEvents: ["scroll"],
            scrollY: 0,
            checkTop: true,
            scrollOptions: {
                stopPropagation: true,
                bounce: false,
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: false,
                scrollbar: false
            }
        };

        @Inject({
            from: "reload", default: () => {
            }
        })
        private reload !: any;

        @State("UserStore")
        public user!: InterfaceUser;

        private detailInfo: any = {//资料，匹配，动态滑动配置信息
            selectedLabel: "资料",
            tabLabels: [{
                label: "资料"
            }, {
                label: "匹配"
            }, {
                label: "动态"
            }],
        };

        @Watch("$route")
        private onChangeItemId(n: any, o: any) {
            if (o.name === "friendInfo" && n.name === "friendInfo" && Number(n.query.friendId) > 0) {
                this.reload();
            }
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private get languageHtml(): string {
            return this.friendData.SNAP_MASTER_LANGUAGE ? this.friendData.SNAP_MASTER_LANGUAGE.split(",").join("<br/>") : "";
        }

        private getTel(): any {
            Http.get(this.api.getAppInfo, {type: "tel"}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.tel = res.data.content;
                }
            });
        }

        private getFriendDynamic(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getUserDynamic, {page: this.page, size: 3, user_id: this.friendInfo.user_id}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    this.page++;
                    this.friendDynamicTotal = res.data.total;
                    this.friendDynamic = res.data.data;
                    console.log(res);
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private onPullingDown(): void {
            (this as any).$refs.mainScroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.getUserDynamic, {page: this.page, size: 3, user_id: this.friendInfo.user_id}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        this.friendDynamic = this.friendDynamic.concat(res.data.data);
                        this.$nextTick(() => {
                            (this as any).$refs.mainScroll.refresh();
                            (this as any).$refs.mainScroll.forceUpdate();
                        });
                        this.page++;
                    } else if (res.data.data == []) {
                        (this as any).$refs.mainScroll.forceUpdate();
                    }
                }
            });
        }

        private get friendImgs(): string[] {
            const friendImgs: string[] = [];
            for (let i in this.friendInfo.photo) {
                friendImgs.push(this.friendInfo.photo[i].uploadfile.file_path);
            }
            return friendImgs;
        }

        private handleImgsClick(index: Number): void {//好友图片预览
            const clientWidth = document.body.clientWidth;
            const params = {
                $props: {
                    imgs: this.friendImgs.map((img) => img + ("?imageView2/0/h/" + clientWidth)),
                    initialIndex: index, // 响应式数据的key名
                    loop: false,
                    zIndex: 100
                },
            };
            (<any> this).$createImagePreview({...params}).show();
        }

        private scrollHandler({y}: any): void {//cubeSticky的scroll滚动事件
            this.cubeSticky.scrollY = -y;
        }

        private getMatchResult(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "计算中..."
            }).show();
            Http.get(this.api.userMatching, {user_id: this.friendId}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    console.log(res);
                    const matchResult: any = {};
                    matchResult.score = res.data.score;
                    let result = new Set(res.data.active);
                    if (result.has("PROVINCE_ID")) {
                        result.delete("PROVINCE_ID");
                        matchResult.active = Array.from(result).slice(0, 5);
                    } else {
                        matchResult.active = res.data.active.slice(0, 5);
                    }
                    matchResult.active = CommonUnit.arrayUnderlineToHump(matchResult.active);
                    result = new Set(res.data.passive);
                    if (result.has("PROVINCE_ID")) {
                        result.delete("PROVINCE_ID");
                        matchResult.passive = Array.from(result).slice(0, 5);
                    } else {
                        matchResult.passive = res.data.passive.slice(0, 5);
                    }
                    this.matchResult = matchResult;
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });

        }

        private changePage(current: any): void {
            if (current == "匹配" && !Object.keys(this.matchResult).length) {
                this.getMatchResult();
            }
            console.log(this.friendDynamic);
            if (current == "动态" && !this.friendDynamic.length) {
                this.getFriendDynamic();
                this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", {
                    threshold: 0,
                    txt: {more: "上滑加载更多", noMore: "没有更多数据了..."},
                    visible: false
                });
            }
            // else {
            //     this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", false);
            // }
            if (current == "动态") {
                this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", {
                    threshold: 0,
                    txt: {more: "上滑加载更多", noMore: "没有更多数据了..."},
                    visible: false
                });
            }
            if (current == "匹配" || current == "资料") {
                this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", false);
            }
            this.$nextTick(() => {
                (<any> this).$refs.sticky.refresh();
                (<any> this).$refs.mainScroll.refresh();
            });
        }

        private scroll(pos: any): void {//cube-slide的滚动
            const x = Math.abs(pos.x);
            const tabItemWidth = (<any> this).$refs.tabNav.$el.clientWidth;
            const slideScrollerWidth = (<any> this).$refs.slide.slide.scrollerWidth;
            const deltaX = x / slideScrollerWidth * tabItemWidth;
            (<any> this).$refs.tabNav.setSliderTransform(deltaX);
        }

        private findIndex(ary: Array<object>, fn: any): number {
            if (ary.findIndex) {
                return ary.findIndex(fn);
            }
            let index = -1;
            ary.some((item: Object, i: any, ary: Array<object>) => {
                const ret = fn.call(this, item, i, ary);
                if (ret) {
                    index = i;
                    return ret;
                }
            });
            return index;
        }

        private get initialIndex(): number {//cube-slide资料，匹配，动态滑动
            let index = 0;
            index = this.findIndex(this.detailInfo.tabLabels, (item: any) => item.label === this.detailInfo.selectedLabel);
            return index;
        }

        private back(): void {
            this.navigateBack();
        }

        private get friendId(): string {
            return String(this.$route.query.friendId || "");
        }

        private get friend(): any {
            return {
                headImg: this.friendInfo.avatar ? this.friendInfo.avatar.file_path + "?imageView2/0/h/100" : "",
                status: this.friendInfo.avatar && this.friendInfo.avatar.file_status.status ? this.friendInfo.avatar.file_status.status : 0,
            };
        }

        private get self(): any {
            return {
                headImg: this.user.avatarId > 0 ? this.user.avatar.filePath : "",
                sex: this.user.gender
            };
        }

        private praise(id: number, index: number): void {
            try {
                Http.post(this.api.dynamicZans, {id: id}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        this.friendDynamic[index].zans_count++;
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                console.log(e);
            }
        }

        private like(): void {
            try {
                if (this.isLike) {
                    Http.post(this.api.cancelPreferById, {id: this.friendId}, {token: this.user.token}).then((res) => {
                        if (res.code == 1) {
                            this.isLike = 0;
                        } else {
                            this.globalSingleResultToast(res);
                        }
                    });
                } else {
                    Http.post(this.api.preferById, {id: this.friendId}, {token: this.user.token}).then((res) => {
                        if (res.code == 1) {
                            this.isLike = 1;
                        } else {
                            this.globalSingleResultToast(res);
                        }
                    });
                }
            } catch (e) {
                console.log(e);
            }
        }

        private guessLike(): void {
            Http.get(this.api.guessYouLikeList, {user_id: this.friendId}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.likeMatch = res.data;
                    this.$nextTick(() => {
                        (<any> this).$refs.sticky.refresh();
                    });
                } else {
                    this.globalSingleResultToast(res);
                }
            });
        }

        private mounted(): void {
            this.getTel();
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getIntentionUser, {id: this.friendId}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    loadToast.hide();
                    this.friendInfo = res.data;
                    this.friendData = res.data.user_info;
                    console.log(this.friendData);
                    this.hobbyList = this.friendData.SNAP_HOBBY !== "未填写" ? this.friendData.SNAP_HOBBY.split(",") : "";
                    let newPhoto: any[] = [];
                    this.friendInfo.photo.forEach((el: any, index: number) => {
                        if (el.status) {
                            newPhoto.push(el);
                        }
                    });
                    this.friendInfo.photo = newPhoto;
                    this.friendGift = this.friendInfo.gift;
                    this.onShareMessage = {
                        title: "我在心相依婚恋遇到了TA，快来看看吧",
                        desc: `${this.friendInfo.identity_introduction}`,
                        thumb: this.filePath,
                        link: `${this.webPath}#/loginRegister?shareCode=${this.user.code}&redirectWebUrl=${this.$route.fullPath}`
                    };
                    this.$nextTick(() => {
                        (<any> this).$refs.sticky.refresh();
                        // (<any> this).$refs.detailScroll.disable();
                    });
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            });
            Http.get(this.api.getPreferConditionById, {id: this.friendId}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.isLike = res.data.count;
                } else {
                    this.globalSingleResultToast(res);
                }
            });
            this.guessLike();
            this.getChatGiftList();
        }

        private toChat(): void {
            if (this.user.userRank < 2) {
                const dialogConfig = new DialogConfig();
                (<any> this).$createDialog({
                    ...dialogConfig.getBecomeMemberConfig(),
                    onConfirm: () => {
                        this.navigateTo({
                            name: "mineMemberRank",
                            query: {
                                back: 1
                            }
                        });
                    }
                }).show();
            } else {
                this.navigateTo({
                    name: "chatDetail",
                    query: {
                        toId: this.friendId
                    }
                });
            }
        }

        private needMatch(): void {
            if (this.user.userRank == 1) {
                (<any> this).$createToast({
                    time: 2500,
                    txt: `您暂无该权利,去升级会员吧!`,
                    type: "error",
                    mask: true,
                    onTimeout: () => {
                        this.toPage("mineMemberRank");
                    }
                }).show();
            }
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确认申请牵线",
                content: "",
                confirmBtn: {
                    text: "确定",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "申请中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.applyMatchService, {user_id: this.friendId}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "申请成功",
                                    type: "correct",
                                    mask: true,
                                }).show();
                            } else {
                                if (res.data.status == 1) {
                                    toast = (<any> this).$createToast({
                                        time: 2500,
                                        txt: `${res.msg}!`,
                                        type: "error",
                                        mask: true,
                                        onTimeout: () => {
                                            this.toPage("mineMatchmaker");
                                        }
                                    }).show();
                                } else if (res.data.status == 2) {
                                    toast = (<any> this).$createToast({
                                        time: 2500,
                                        txt: `${res.msg},去升级会员吧!`,
                                        type: "error",
                                        mask: true,
                                        onTimeout: () => {
                                            this.toPage("mineMemberRank");
                                        }
                                    }).show();
                                } else {
                                    toast.hide();
                                    this.globalSingleResultToast(res);
                                }

                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private showGift(): void {
            this.showGiftTool = !this.showGiftTool;
        }

        private selectGift(id: number) {
            console.log(id);
            this.giftSelectId = id;
        }

        private getChatGiftList() {
            Http.get(this.api.getGiftList, {}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    const giftList: any[] = [];
                    for (let i in res.data) {
                        let startIndex = Number(i) * 8;
                        let endIndex = Number(i) * 8 + 8;
                        let list = res.data.slice(startIndex, endIndex);
                        if (list.length === 0) {
                            break;
                        }
                        giftList.push(list);
                    }
                    this.giftList = giftList;
                }
            });
        }

        private async giveGift() {
            if (this.giftSelectId >= 0) {
                let toast = (<any> this).$createToast({
                    time: 0,
                    txt: "正在赠送礼物中...",
                    mask: true
                }).show();
                //this.alwaysBottom = true;
                try {
                    const result = await Http.post(this.api.placeGiftOrder, {id: this.giftSelectId, user_id: this.friendId}, {token: this.user.token});
                    if (result.code === 1) {
                        //this.authentication();
                        this.showGift();
                        toast = (<any> this).$createToast({
                            time: 500,
                            txt: "赠送礼物成功",
                            type: "correct",
                            mask: true,
                            onTimeout: () => {
                                this.reload();
                            }
                        }).show();
                    } else {
                        if (this.globalSingleResultToast(result)) {
                            this.navigateTo({
                                name: "mineMoneyRecharge"
                            });
                        }
                    }
                } catch (e) {
                    toast = (<any> this).$createToast({
                        time: 2000,
                        txt: "赠送失败，请稍后重试。。。",
                        mask: true,
                        type: "error"
                    }).show();
                }
            }
        }

        private share(): void {
            shareControllerToggle(this.onShareMessage);
        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background-color $theme-page-chat-background-color;
        $wavy-box-height := 60px;


        .friend-header
            background-color #FFBACF
            padding-top var(--safe-area-inset-top)

        .sticky-top
            padding 15px 10px;
            color #fff;

            .nickname
                font-size 16px;
                padding-left 6px;

            .icon-sandian
                font-size 24px;

            .icon-xiaoxi
                font-size 24px;
                margin-right 7px;

        >>> .cube-sticky
            height calc(100vh - 46px - 46px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));

        >>> .cube-sticky-content

            .isSticky
                color $theme-common-color;
                background-color #fff;

            .sticky-middle
                background-color #fff;

                &::after
                    display block;
                    content '';
                    width 100vw;
                    height 1px;
                    background-color $theme-line-color;
                    position absolute;
                    bottom 0px;
                    left 0px;

                .cube-tab
                    padding 15px 0;
                    position relative

                .cube-tab_active
                    color $theme-common-color;

                    &::after
                        content '';
                        display block;
                        width 100%;
                        height 2px;
                        left 0;
                        bottom 1px;
                        position absolute;
                        background $theme-common-color;

                .cube-tab-bar-slider
                    background-color $theme-common-color;

        .info-box
            background-color #fff;

            &::before
                content '';
                height calc(60px + 30px);
                display block;
                clear both;
                width 100vw;

            .wavy-box
                .wavy-svg
                    position absolute;
                    top 0px;
                    left 0px;
                    z-index 50;
                    margin-top -20px;

                .section
                    width 80px;
                    height 11vw;

                    background-color #FFD7F3;
                    position absolute;
                    top 40px;
                    z-index 2;

                    transform: skew(62deg, -27deg);
                    border-top-right-radius 100%;
                    border-bottom-left-radius 100%;

            .head-img
                position absolute;
                z-index 100;
                left calc(50vw - 40px);
                top: 2px

            .friend-name
                text-align center;
                font-size 18px;

            .friend-factor
                margin-top 15px;
                text-align center;
                color $theme-auxiliary-color;

                span
                    padding 0px 8px;
                    border-right 1px solid $theme-auxiliary-color;

                    &:last-child
                        border none;

            .handle
                padding 20px 0px;
                justify-content space-around;

                > div
                    text-align center;

                    span
                        font-size 25px;

                    p
                        margin-top 10px;
                        color $theme-auxiliary-color;

                div.credit
                    span
                        font-size 27px;

                        &:before
                            background: -webkit-gradient(linear, left top, left bottom, from(#FFC4B5), to($theme-common-color));
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;

                div.complaint
                    p
                        margin-top 11px;

                    span
                        font-size 25px;

                        &:before
                            background: -webkit-gradient(linear, left top, left bottom, from(#FFC4B5), to($theme-common-color));
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;

                div.date
                    p
                        margin-top 11px;

                    span
                        font-size 25px;

                        &:before
                            background: -webkit-gradient(linear, left top, left bottom, from(#FFC4B5), to($theme-common-color));
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;

                div.matchmaker
                    p
                        margin-top 3.4vw;

                    span
                        font-family: '黑体';
                        font-size 23px;
                        background: -webkit-gradient(linear, left top, left bottom, from(#FFC4B5), to($theme-common-color));
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;

            .img-show
                .img-show-none
                    padding 20px 15px;
                    padding-top 0px;
                    align-items center;

                    .left
                        width 70px;
                        height 70px;
                        border 1px dashed $theme-line-color;
                        border-radius 5px;
                        text-align center;
                        flex-wrap wrap;
                        align-content center;
                        color $theme-viceColor-font;

                        div
                            width 100vw;

                        .icon-xiangji2
                            font-size 30px;
                            color #B9B8CD;
                            margin-bottom 3px;

                    .right
                        width calc(100vw - 80px);
                        text-align center;


                >>> .horizontal-scroll-list-wrap
                    margin 0 12px;
                    overflow hidden

                    .cube-scroll-content
                        display inline-block;


                        .list-wrapper
                            padding-bottom 10px;
                            white-space nowrap;

                            .list-item
                                display inline-block;
                                margin 0 3px;
                                height 80px;
                                width 80px;
                                background-position center;
                                background-size cover;

                                img
                                    height 100%;
                                    width 100%;

        .detail-info
            margin-top 15px;

            .self-info-head
                background-color #fff;

                >>> .cube-tab-bar
                    .cube-tab_active
                        color $theme-common-color;

                    .cube-tab-bar-slider
                        background-color $theme-common-color;

                    .cube-tab
                        padding 15px 0;
                        position relative;

                    .cube-tab_active
                        &::after
                            content '';
                            display block;
                            width 100%;
                            height 2px;
                            left 0;
                            bottom 0px;
                            position absolute;
                            background $theme-common-color;

            >>> .tab-slide-container
                //height 100vh;

                .tab-content-wrap
                    white-space normal;

                    .self-intro
                        background-color #fff;

                        .title
                            font-size 16px;
                            align-items center;
                            height 40px;
                            position relative;

                            &::after
                                display block;
                                content '';
                                width calc(100vw - 30px);
                                height 1px;
                                background-color $theme-line-color;
                                position absolute;
                                bottom 0px;
                                left 15px;

                            .deco-line
                                width 20px;
                                height 20px;
                                border-left 2px solid $theme-common-color;

                            .title-text
                                width calc(100vw - 20px - 20px);

                                span
                                    color $theme-common-color;

                        .content
                            padding 15px;
                            line-height 1.4em;
                            padding-bottom 30px;

                    .authentication
                        margin-top 20px;

                        .content
                            padding 15px;
                            justify-content: center;

                            .real
                                text-align center;

                                .icon-box
                                    width 60px;
                                    height 60px;
                                    border-radius 50%;
                                    background-color $theme-page-common-background-color;
                                    line-height 60px;
                                    margin-bottom 10px;

                                    .icon-renzheng
                                        font-size 25px;
                                        color #fff;

                                .is-real
                                    background #DE1B9A !important;


                    .base-info
                        margin-top 15px;

                        .content
                            padding 10px 15px;

                            > div
                                padding 8px 0px;

                                > span
                                    display inline-block;
                                    width 50vw;

                    .hobby
                        margin-top 15px;

                        .content
                            line-height normal;
                            padding 15px;
                            flex-wrap wrap;

                            > span
                                display inline-block;
                                padding 3px 15px;
                                border 1px solid $theme-line-color;
                                border-radius 100px;
                                margin 5px;

                    .like-match
                        margin-bottom 20px;

                        .content
                            padding 10px 0;
                            justify-content space-around;

                            .candidates
                                width 23vw;
                                text-align center;

                                .nickname
                                    width 23vw;

                                .img-box
                                    img
                                        width 60px;
                                        height 60px;
                                        border-radius 50%;

                    .gift
                        .content-none
                            padding 10px 15px;

                        .content
                            padding 0;

                            .horizontal-scroll-list-wrap
                                width 100vw;

                                .cube-scroll-content
                                    display inline-block;

                                    .list-wrapper
                                        .gift-item
                                            width calc(25vw - 10px);
                                            height 100px;
                                            position relative;
                                            display flex;
                                            justify-content space-between;
                                            align-items center;
                                            margin 5px;
                                            padding 7px;
                                            box-sizing border-box
                                            flex-direction column;
                                            border-radius 5px;


                                            img.gift-picture
                                                height 45px;
                                                width 45px;
                                                display block;

                                            .gift-name
                                                color #878787;
                                                font-size 12px;
                                                width calc(25vw - 10px);
                                                height 30px;
                                                line-height 30px;
                                                text-align center;

                                            .gift-price
                                                color #c1c1c1;
                                                font-size 12px;
                                                line-height 20px;

                                                &::before
                                                    padding-right 2px;
                                                    font-size 11px;


            .match-module
                width 100vw;
                //height calc(100vh - 38px - 38px);
                background-color #fff;
                overflow hidden;

                .no-match
                    padding 20px 20vw;

                    .headImg-link
                        position relative;

                        .friend-img
                            position absolute;
                            left -10px;
                            top 0;
                            z-index 2;

                        .line
                            width 60vw;
                            height 21vw;
                            text-align center;

                            &::after
                                display block;
                                content '';
                                width 60vw;
                                height 1px;
                                border-top 1px dashed $theme-common-color;
                                position absolute;
                                left 0;
                                top 50%;

                            .svg-icon
                                font-size 10vw;
                                position absolute;
                                left 50%;
                                top 50%;
                                margin-top -7vw;
                                margin-left -5vw;
                                z-index 4;


                        .self-img
                            position absolute;
                            border none;
                            right -10px;
                            top 0;
                            z-index 2;

                    .tip
                        text-align center;
                        margin 15px 0px;

                        > p
                            line-height 1.6em;

                    .compute
                        width calc(100vw - 20vw);
                        height 40px;
                        line-height 40px;
                        font-size 18px;
                        border-radius 200px;
                        margin-left -10vw;
                        background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
                        color #fff;
                        text-align center;

                .compute-result
                    padding 15px 20px;

                    .time
                        color $theme-viceColor-font;
                        font-size 12px;
                        text-align center;
                        margin-bottom 20px;

                    .result
                        position relative;

                        .result-data
                            position absolute;
                            left calc((100vw - 40px - 300px) / 2);
                            top calc(50% - 12px);

                            .fix
                                width 300px;
                                overflow hidden;
                                border-radius 100px;

                                > div
                                    width 50%;
                                    color #fff;
                                    padding 0px 14px;
                                    font-size 12px;
                                    height 24px;
                                    line-height 24px;

                                .left
                                    background-color #FFB196;

                                .right
                                    text-align right;
                                    background-color #FF9BC8;

                            .match-degree-box
                                width 16vw;
                                height 16vw;
                                border-radius 50%;
                                background-color #fff;
                                position absolute;
                                left calc(50% - 8vw);
                                top calc(-8vw + 12px);
                                z-index 100;

                                .match-degree
                                    width 14vw;
                                    height 14vw;
                                    line-height calc(14vw - 6px);
                                    font-size 16px;
                                    border-radius 50%;
                                    border 3px solid;
                                    border-color #FFB196 #FF9BC8 #EC6786;
                                    position absolute;
                                    left calc(50% - 7vw);
                                    top calc(50% - 7vw);
                                    text-align center;
                                    color #EC6786;

                        .friend-result, .self-result
                            position relative;
                            width calc(100vw - 40px);
                            height 200px;

                            .standard
                                span.age
                                    position absolute;
                                    top 60px;
                                    left 8px;
                                    animation mymove0 6s linear infinite;
                                    @keyframes mymove0
                                        0%
                                            top 60px;
                                            left 8px;
                                        25%
                                            top 67px;
                                            left 15px;
                                        50%
                                            top 60px;
                                            left 22px;
                                        75%
                                            top 53px;
                                            left 15px;
                                        100%
                                            top 60px;
                                            left 8px;

                                span.income
                                    position absolute;
                                    top 30px;
                                    right 20px;
                                    animation mymove1 6s linear infinite;
                                    @keyframes mymove1
                                        0%
                                            top 30px;
                                            right 20px;
                                        25%
                                            top 37px;
                                            right 27px;
                                        50%
                                            top 44px;
                                            right 20px;
                                        75%
                                            top 37px;
                                            right 13px;
                                        100%
                                            top 30px;
                                            right 20px;

                                span.height
                                    position absolute;
                                    top 100px;
                                    right 8px;
                                    animation mymove2 6s linear infinite;
                                    @keyframes mymove2
                                        0%
                                            top 100px;
                                            right 8px;
                                        25%
                                            top 93px;
                                            right 15px;
                                        50%
                                            top 100px;
                                            right 22px;
                                        75%
                                            top 107px;
                                            right 15px;
                                        100%
                                            top 100px;
                                            right 8px;

                                span.house
                                    position absolute;
                                    bottom 30px;
                                    right 50px;
                                    animation mymove3 6s linear infinite;
                                    @keyframes mymove3
                                        0%
                                            bottom 30px;
                                            right 50px;
                                        25%
                                            bottom 23px;
                                            right 57px;
                                        50%
                                            bottom 30px;
                                            right 64px;
                                        75%
                                            bottom 37px;
                                            right 57px;
                                        100%
                                            bottom 30px;
                                            right 50px;

                                span.education
                                    position absolute;
                                    bottom 50px;
                                    left 8px;
                                    animation mymove4 6s linear infinite;
                                    @keyframes mymove4
                                        0%
                                            bottom 50px;
                                            left 8px;
                                        25%
                                            bottom 57px;
                                            left 15px;
                                        50%
                                            bottom 50px;
                                            left 22px;
                                        75%
                                            bottom 43px;
                                            left 15px;
                                        100%
                                            bottom 50px;
                                            left 8px;

                            .outline-dynamic
                                width 200px;
                                height 200px;
                                border-radius 50%;
                                border 2px solid rgba(236, 103, 134, .2);
                                box-shadow: 0px 0px 8px 2px rgba(236, 103, 134, .2);
                                position absolute;
                                top calc(50% - 100px);
                                left calc(50% - 100px);
                                animation mychange 2s linear infinite;
                                @keyframes mychange
                                    100%
                                        width 230px;
                                        height 230px;
                                        top calc(50% - 230px / 2);
                                        left calc(50% - 230px / 2);
                                        border 2px solid rgba(236, 103, 134, 0);
                                        box-shadow: none;


                            .outline
                                width 40vw;
                                height 40vw;
                                border-radius 50%;
                                border 1px solid rgba(236, 103, 134, .2);
                                position absolute;
                                top calc(50% - 20vw);
                                left calc(50% - 20vw);

                                .innerline
                                    width 30vw;
                                    height 30vw;
                                    border-radius 50%;
                                    border 1px solid rgba(236, 103, 134, .2)
                                    text-align center;
                                    position absolute;
                                    top 5vw;
                                    left 5vw;

                                    .friend-img, .self-img
                                        position absolute;
                                        top 6vw;
                                        left 6vw;

                                    .title-tip
                                        width 30vw;
                                        height 20px;
                                        line-height 20px;
                                        font-size 13px;
                                        text-align center;
                                        background-color rgba(255, 255, 255, .8);
                                        position absolute;
                                        bottom 16px;


            .friend-dynamic-box
                padding-bottom 0 !important;

                .friend-dynamic
                    .item
                        padding 0px 15px;
                        background-color #fff;
                        margin-top 8px;

                        &:first-child
                            margin-top 0px;

                        .title
                            padding 15px 0px;

                        .upload-headImg
                            width 36vw;
                            height 42vw;

                        .upload-selfIntro
                            padding 15px 10px;
                            background-color $theme-page-chat-background-color;

                        .other
                            padding 15px 0px;
                            color $theme-viceColor-font;

        .fix-box
            width 100vw;
            position fixed;
            bottom 0;
            z-index 50;
            background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
            padding 15px 0px;
            padding-bottom calc(15px + var(--safe-area-inset-bottom));
            color #fff;

            > div
                width 25vw;
                text-align center;
                border-right 1px solid #fff;

                &:last-child
                    border none;

                span.iconfont
                    padding-right 10px;

    .tab-content-wrap
        //padding-bottom calc(66px + var(--safe-area-inset-bottom));
        min-height calc(100vh - 46px - 46px - var(--safe-area-inset-top));

        .none-dynamic
            text-align center;
            margin-top 40px;
            color $theme-viceColor-font;

            .icon-zanwudongtai
                font-size 100px;


    .gift-mask
        background-color rgba(0, 0, 0, .4);
        position absolute;
        top 0;
        left 0;
        bottom 0;
        right 0;
        z-index: 100;

    .picker-gift-show
        transform translateY(0) !important;

    .picker-gift
        height calc(312px + var(--safe-area-inset-bottom));
        background #fff;
        position absolute;
        width 100vw;
        bottom 0;
        left 0;
        z-index 200 !important;
        transform translateY(100%);
        transition all .3s ease-in-out;

        .picker-gift-head
            height 45px;
            display flex;
            justify-content center;
            align-items center;
            color $theme-common-color;

        .picker-gift-wrap
            height 204px;

            .picker-gift-box
                width 100vw;
                height 204px;
                overflow hidden;
                position relative;
                display flex;
                flex-wrap wrap;

                >>> .horizontal-scroll-list-wrap
                    width 100vw;

                    .cube-scroll-content
                        display inline-block;

                        .list-wrapper
                            padding-bottom 10px;
                            white-space nowrap;

                            .item-outer
                                flex-wrap wrap;
                                width 100vw;

                                .gift-item
                                    width calc(25vw - 10px);
                                    height 92px;
                                    position relative;
                                    display flex;
                                    justify-content space-between;
                                    align-items center;
                                    margin 5px;
                                    padding 4px 7px;
                                    box-sizing border-box
                                    flex-direction column;
                                    border-radius 5px;


                                    img.gift-picture
                                        height 45px;
                                        width 45px;
                                        display block;

                                    .gift-name
                                        color #878787;
                                        margin-top 2px
                                        font-size 12px;
                                        width calc(25vw - 10px);
                                        text-align center;

                                    .gift-price
                                        color #c1c1c1;
                                        font-size 12px;
                                        line-height 20px;

                                        &::before
                                            padding-right 2px;
                                            font-size 11px;

                .gift-item-selected
                    border 1px solid $theme-advancing-color;
                    padding 4px 6px !important;


        .picker-gift-action
            height calc(63px + var(--safe-area-inset-bottom));
            padding 0 10px;
            padding-bottom var(--safe-area-inset-bottom);
            display flex;
            justify-content space-between;
            align-items center;

            .number
                padding-right 5px;

                &::before
                    font-size 14px;
                    padding-right 4px;
                    color #aaa;

            .recharge
                padding-right 3px;

            .picker-gift-balance
                color #777777;

            .picker-gift-btn
                background $theme-thin-color;
                height 35px;
                line-height 35px;
                width 120px;
                border-radius 35px;
                color #fff;
                text-align center;
                transition background .2s ease-in-out;

            .picker-gift-btn-active
                background $theme-common-color;
</style>
